<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="../js/vue-router.min.js"></script>
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>
    <style>
        .router-link-exact-active,
        .router-link-active {
            background: #f50;
            border: 1px solid darkblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>

        <!-- 5.路由出口  在哪里显示组件 -->
        <div style="width: 80%;height: auto;padding: 20px;border: 2px solid brown;">
            <router-view></router-view>
        </div>

    </div>

    <template id="main">
        <div>
            <h2>微信App路由配置 </h2>

            <hr>

            <router-view></router-view>
            <!-- footer组件要放在父路由里面 -->
            <myfoot></myfoot>

        </div>
    </template>

    <template id="wechat">
        <div>
            <h2>wechat - wechat - wechat </h2>
            <p>聊天列表</p>
        </div>
    </template>

    <template id="contact">
        <div>
            <h2>contact - contact - contact </h2>
            <p>通讯录</p>
        </div>
    </template>

    <template id="find">
        <div>
            <h2>find - find - find</h2>
            <p>朋友圈 </p>
            <div>
                <ul>
                    <li v-for="(l,i) in list" :key="i">
                        <router-link :to="{name:'detail',params:{id:l.id},query:{name:l.title}}">
                            {{l.title}} -- {{l.year}}
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </template>

    <template id="mine">
        <div>
            <h2>mine-mine-mine </h2>
            <p>我的 </p>
        </div>
    </template>




    <!-- 这是 foot 组件 -->
    <template id="foot">


        <footer>
            <router-link v-for="(l,i) in footList" :key="i" :to="{name:l.name}">
                {{l.txt}}
            </router-link>
        </footer>
    </template>


    <!-- 详情页模板 -->
    <template id="detail">
        <div>
            <h2>详情页面 -- detail </h2>

            <!-- 在模板里面获取传来的参数 -->
            <p>电影id === {{$route.params.id}}</p>
            <p>电影name === {{$route.query.name}}</p>

            <button @click="$router.go(-1)">返回</button>
        </div>
    </template>



</body>

<script>
    //1.定义(路由)组件 . 组件选项对象
    const Main = {
        template: "#main"
    }

    const Wechat = {
        template: "#wechat"
    }

    const Contact = {
        template: "#contact"
    }

    const Find = {
        template: "#find",
        data() {
            return {
                list: []
            }
        },
        mounted() {
            $.ajax({
                type: "get",
                url: "../json/movie.json",
                data: {},
                dataType: 'json',
                success: res => {
                    console.log(res)
                    // layer.msg(res.msg);
                    this.list = res.result
                }
            })
        }
    }

    const Mine = {
        template: "#mine"
    }

    const Detail = {
        template: "#detail"
    }

    


    //注册一个 foot 的全局组件
    Vue.component("myfoot", {
        template: "#foot",
        data() {
            return {
                footList: [{
                        path: "wechat",
                        name: 'wechat',
                        txt: "微信",
                        icon: ""
                    },
                    {
                        path: "contact",
                        name: 'contact',
                        txt: "通讯录",
                        icon: ""
                    },
                    {
                        path: "find",
                        name: 'find',
                        txt: "发现",
                        icon: ""
                    },
                    {
                        path: "mine",
                        name: 'mine',
                        txt: "我的",
                        icon: ""
                    }
                ]
            }
        }
    })





    // 2.定义路由和组件的映射关系  path 和 component 一一映射
    const routes = [{
            path: "/",
            redirect: "/main"
        },
        {
            name: "main",
            path: "/main",
            component: Main,
            redirect: "/main/wechat", //重定向
            children: [ //子路由
                {
                    path: "wechat",
                    name: "wechat",
                    component: Wechat
                },
                {
                    path: "contact",
                    name: "contact",
                    component: Contact
                },
                {
                    path: "find",
                    name: "find",
                    component: Find
                },
                {
                    path: "mine",
                    name: "mine",
                    component: Mine
                }
            ]
        },
        {
            name: "detail",  //详情页写在外面
            path: "/detail/:id",
            component: Detail
        },
        {
            path: "*",
            redirect: {
                name: "main"
            }
        }
    ]


    // 3.创建 router 实例
    const router = new VueRouter({
        routes,
        base: "",
        mode: "hash"
    });



    // 4. 挂载根实例
    const vm = new Vue({
        router,
        watch: { //监听来自哪里和去哪里
            '$route': function (to, from) {
                console.log("to", to);
                console.log("from", from);
            }
        },
        data: {
            title: "真吉尔烦"
        },
        motheds: {

        },
        mounted() {
            document.querySelectorAll("title")[0].innerHTML = this.title;
            console.log("路由的参数选项信息", this.$route); //路由的参数选项信息
            console.log("路由实例对象", this.$router); //路由实例对象
        }


    }).$mount("#app")
</script>

</html>